<template>
    <div class="posts_container">
        <div class="title">
            <h3><router-link :to="{path:`/post`,query:{'post':JSON.stringify(post)}}" >{{post.title}}</router-link></h3>
        </div>
        <hr style= "border-top:none;border-bottom:none" />
        <div class="summary">
            {{post.content | getP}}
        </div>
        <hr style= "border-top:1px dashed #000;border-bottom:none" />
        <div class="attrs">
            <img :src="post.author.avatar" @click="toAuthor(post.author['_id'])" class="avatar">
            <span style="cursor:pointer" @click="toAuthor(post.author['_id'])">{{post.author.name}}</span>
            <span>{{post.postDate | formateDate}}</span>
            <!-- 评论 -->
            <div class="heatdegree">
                <img src="../assets/component.png" style="width:20px;height:20px;margin-left:10px;">
                <span>{{post.commentsCount}}</span>
            </div>
            <!-- 阅读量 -->
            <div class="heatdegree">
                <img src="../assets/pv.png" style="width:20px;height:20px;margin-left:10px;">
                <span>{{post.readsCount}}</span>
            </div>
            <!-- 点赞 -->
            <div class="heatdegree">
                <img :src="greatDic?require('../assets/greated.png'):require('../assets/great.png')" @click="doGreat" style="width:20px;height:20px;margin-left:10px;">
                <span>{{post.greatsCount}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name:'PostItem',
    props:['post','greatDic'],
    data(){
        return {
        }
    },
    filters:{
        getP:function(value){
            let div=document.createElement('div');
            div.innerHTML=value;
            let pArr=div.getElementsByTagName('p');
            let text='';
            for(let i=0;i<pArr.length;i++){
                if(text.length>100)
                    break;
                if(pArr[i].innerText!='&nbsp;')
                    text+=pArr[i].innerText;
            }
            return text;
        },
        
    },
    methods:{
        //点赞
        doGreat(){
            this.$axios.post('/api/greats/doGreat',{
                post:this.post['_id'],
            })
            .then(res=>{
                if(res.data.ok==1){
                    Message.error("出错了！");
                }
                else if(res.data.ok==0){
                    Message.success({message:"点赞成功~~~",showClose:true});
                    this.post.greatsCount+=1;
                    this.greatDic=true;
                }
                else{
                    Message.success({message:"已取消~~~",showClose:true});
                    this.post.greatsCount-=1;
                    this.greatDic=false;
                }
            })
        },
        //跳转到作者页面
        toAuthor(authorId){
            this.$router.push(`/home/${authorId}`);
        }
    },
    //.replace(/<\/?.+?>/g,"")
}
</script>

<style scoped>
.posts_container{
    width:100%;
    height:auto;
    /* margin-bottom: 10px; */
    box-sizing: border-box;
    padding: 10px 10px 0 10px;
    border-bottom:1px solid #ccc;
}
.title{
    padding:5px 5px 0 5px;
    height:auto;
}
.summary{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height:auto;
    padding: 0 5px 0px 5px;
    color:#666;
}
a{
    text-decoration: none;
    color:#000;
}
.attrs{
    width:100%;
    height:25px;
    padding: 0 5px 5px 5px;
    position: relative;
    box-sizing: border-box;
}
.avatar{
    width:20px;
    height:20px;
    margin: auto;
    border-radius: 50% 50%;
    cursor: pointer;
    background-size: cover;
}
.attrs span{
    font-size: 10px;
    color:#000;
    line-height: 1;
    margin-left:10px;
    position:relative;
    top:-5px;
}
.heatdegree{
    float:right;
    cursor: pointer;
}
.heatdegree span{
    color:#3399ea;
}
</style>

